@charset "UTF-8";
/* 
sass文件的后缀名scss
sass 3.0 sass  scss

scss目前流行 scss

sass基于ruby开发的 不识别中文

D:\a-jinsi-courseware\1.class course\5.W2203A\code\w2203a-3\less sass。。。

*/
/* 
定义变量
$ 定义变量

*/
/* 
mixin 混合
@mixin 混合名字(){

}
调用 
@include 混合名()


函数

引入其他sass文件 @import
*/
* {
  margin: 0;
  padding: 0;
}

.wrap {
  /*  width: 500px;
    height: 500px;
    background-color: red; */
  /* position: absolute;
    left: $zero;
    right: $zero;
    top: $zero;
    bottom: $zero;
    margin: auto; */
  width: 500px;
  height: 500px;
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.wrap .middle {
  width: 300px;
  height: 300px;
  background-color: yellow;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.wrap .middle .inner {
  width: 100px;
  height: 100px;
  background-color: #0011ff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.wrap1 {
  width: 100px;
  height: 200px;
  background-color: red;
}

/* 循环语句*/
/* @for */
.box1 {
  height: 10px;
}

.box2 {
  height: 20px;
}

/* @for循环  from 起始位置 to 结束位置
包含起始位置 不包含结束位置
*/
/* @for循环  from 起始位置 through 结束位置
包含起始位置 包含结束位置
*/
.box1 {
  height: 10px;
}

.box2 {
  height: 20px;
}

.box3 {
  height: 30px;
}

/* @while */
.f-box10 {
  width: 100px;
}

.f-box11 {
  width: 110px;
}

.f-box12 {
  width: 120px;
}

.f-box13 {
  width: 130px;
}

.f-box14 {
  width: 140px;
}

.f-box15 {
  width: 150px;
}

.f-box16 {
  width: 160px;
}

.f-box17 {
  width: 170px;
}

.f-box18 {
  width: 180px;
}

.f-box19 {
  width: 190px;
}

/* @each */
.box-fxx5 {
  font-size: 5px;
}

.box-fxx10 {
  font-size: 10px;
}

.box-fxx15 {
  font-size: 15px;
}

.box-fxx20 {
  font-size: 20px;
}
